<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <span>招聘网站</span>
      <div class="search-menu">
        <!-- 搜索框 -->
        <el-autocomplete
          size="large"
          placeholder="搜索岗位"
        ></el-autocomplete>
        <el-divider direction="vertical"></el-divider>
        <!-- 顶部菜单栏 -->
        <el-menu class="main-menu" mode="horizontal" text-color="#A0CFFF" active-text-color="#1989FA">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">求职</el-menu-item>
          <el-menu-item index="3">公司</el-menu-item>
          <el-menu-item index="4">课程</el-menu-item>
          <el-menu-item index="5">APP</el-menu-item>
        </el-menu>   
        <el-divider direction="vertical"></el-divider>
        <!-- 个人中心下拉框 -->
        <el-dropdown class="per-dropdown" trigger="hover" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ job_hunter_name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="dropdown-item" command="a">个人资料</el-dropdown-item>
            <el-dropdown-item class="dropdown-item" command="b">我的首页</el-dropdown-item>
            <el-dropdown-item class="dropdown-item" command="c">我的收藏</el-dropdown-item>
            <el-dropdown-item class="dropdown-item" command="d">我的投递</el-dropdown-item>
            <el-dropdown-item class="dropdown-item" command="e">面试邀请</el-dropdown-item>
            <el-dropdown-item class="dropdown-item" command="f">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>
    <!-- 主体区域 -->
    <el-container class="body">
      <el-aside class="aside">
        <div class="avatar-container">
          <div class="block"><el-avatar :size="60" :src="require('../assets/scau.jpeg')"></el-avatar></div>
          <span class="username">{{ job_hunter.jobhuntername }} </span>
        </div>
        <el-menu class="profile-menu">
          <el-menu-item index="1">
            <span slot="title">个人资料</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">我的首页</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">我的收藏</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">我的投递</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">面试邀请</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="user-content">
        <el-form :model="job_hunter" label-width="0px" class="profile_form">
          <el-form-item prop="jobhuntername">
            <span>姓名</span>
            <el-input v-model="job_hunter.jobhuntername"></el-input>
          </el-form-item>
          <el-form-item prop="telephone">
            <span>手机</span>
            <el-input v-model="job_hunter.telephone"></el-input>
          </el-form-item>
          <div class="profile_select"> 
            <el-form-item prop="age">
              <span class="select_span">年龄</span>
              <el-input-number v-model="job_hunter.age" :min="1" :max="120" label="年龄"></el-input-number>
            </el-form-item>
            <el-form-item prop="age">
              <span class="select_span">性别</span>
              <el-select v-model="job_hunter.sex" placeholder="性别">
                <el-option v-for="sex in sex_list"  :key="sex.value" :label="sex.label" :value="sex.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="salary">
              <span class="select_span">期望薪资</span>
              <el-select v-model="job_hunter.salary" placeholder="期望薪资">
                <el-option v-for="salary in salary_list"  :key="salary.value" :label="salary.label" :value="salary.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="profile_select">
            <el-form-item prop="status">
              <span class="select_span">状态</span>
              <el-select v-model="job_hunter.status" placeholder="求职状态">
                <el-option v-for="status in status_list"  :key="status.value" :label="status.label" :value="status.value"></el-option>   
              </el-select>
            </el-form-item>
            <el-form-item prop="experience">
              <span class="select_span">工作经验</span>
              <el-select v-model="job_hunter.experience" placeholder="工作经验">
                <el-option v-for="experience in experience_list"  :key="experience.value" :label="experience.label" :value="experience.value"></el-option>   
              </el-select>
            </el-form-item>
            <el-form-item prop="education">
              <span class="select_span">学历</span>
              <el-select v-model="job_hunter.education" placeholder="学历">
                <el-option v-for="education in education_list"  :key="education.value" :label="education.label" :value="education.value"></el-option>
              </el-select>
            </el-form-item>   
          </div>         
          <el-form-item prop="intention">
            <span>求职意向</span>
            <el-input v-model="job_hunter.intention"></el-input>
          </el-form-item>
          <el-form-item prop="description">
            <span>个人简介</span>
            <el-input :autosize="{ minRows: 4, maxRows: 10}" v-model="job_hunter.description"></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="button">
            <el-button type="primary" @click="put_job_hunter">修改</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      job_hunter_name: window.sessionStorage.getItem('job_hunter_name'),
      job_hunter: {
        "age": 0,
        "sex": '',
        "jobhuntername": '',
        "education": '',
        "telephone": '',
        "status": '',
        "experience": '',
        "salary": '',
        "description": '',
        "intention": ''
      },
      education_list: [
        {"label": "大专", "value": "junior"},
        {"label": "本科", "value": "course"},
        {"label": "硕士", "value": "master"},
        {"label": "博士", "value": "doctor"},
        {"label": "其他", "value": "other"}
      ],
      status_list: [
        {"label": "在校", "value": "school"},
        {"label": "在职找工作", "value": "hunting"},
        {"label": "在职看机会", "value": "waiting"},
        {"label": "暂时不找工作", "value": "nofind"},
        {"label": "离职找工作", "value": "resign"}
      ],
      sex_list: [
        {"label": "男", "value": "male"},
        {"label": "女", "value": "female"}
      ],
      experience_list: [
        {"label": "在校/应届", "value": "new"},
        {"label": "3 年以下", "value": "0-3"},
        {"label": "3-5 年", "value": "3-5"},
        {"label": "5-10 年", "value": "5-10"},
        {"label": "10 年以上", "value": "10-"},
        {"label": "无要求", "value": "none"},
      ],
      salary_list: [
        {"label": "2k 以下", "value": "0-2000"},
        {"label": "2k-5k", "value": "2000-5000"},
        {"label": "5k-10k", "value": "5000-10000"},
        {"label": "10k-15k", "value": "10000-15000"},
        {"label": "15k-25k", "value": "15000-25000"},
        {"label": "25k-50k", "value": "25000-50000"},
        {"label": "50k 以上", "value": "50000-"},
      ]
    }
  },
  created () {
    this.get_job_hunter()
  },
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleCommand(command) {
      if (command == "a") {
        this.$router.push('/jobhunter/profile');
      }
      if (command == "b") {
        this.$router.push('/jobhunter/' + window.sessionStorage.getItem('job_hunter_id'))
      }
    },
    async get_job_hunter() {
      this.$http.get('api/jobhunter/' + window.sessionStorage.getItem('job_hunter_id'), {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': window.sessionStorage.getItem('token')
        }
      })
      .then(response => {
          this.job_hunter = response.data;
        }
      )
    },
    select_label_to_value() {
      const salaryObj = this.salary_list.find( item => item.label == this.job_hunter.salary );
      if(salaryObj) this.job_hunter.salary=salaryObj.value;
      const sexObj = this.sex_list.find( item => item.label == this.job_hunter.sex );
      if(sexObj) this.job_hunter.sex=sexObj.value;
      const experienceObj = this.experience_list.find( item => item.label == this.job_hunter.experience );
      if(experienceObj) this.job_hunter.experience=experienceObj.value;
      const statusObj = this.status_list.find( item => item.label == this.job_hunter.status );
      if(statusObj) this.job_hunter.status=statusObj.value;
      const educationObj = this.education_list.find( item => item.label == this.job_hunter.education );
      if(educationObj) this.job_hunter.education=educationObj.value;
    },
    async put_job_hunter() {
      this.select_label_to_value();
      var formData = JSON.stringify(this.job_hunter);
      this.$http({
        method: "put",
        url:'api/jobhunter/' + window.sessionStorage.getItem('job_hunter_id'),
        headers: {
          'Content-Type': 'application/json',
          'Authorization': window.sessionStorage.getItem('token')
        },
        data:formData
      })
      .then(response => {
        this.job_hunter = response.data;
        this.$message.success('修改成功');
      })
      .catch(err =>{
        console.log(err.response.data);
        this.$message.error('修改失败');
      })
    }
  },
  watch: {
    '$route': "get_job_hunter"
  }
};
</script>

<style lang="less" scoped>

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  border-bottom: 1px solid #ebebeb;
  >span {
    color: #409EFF;
    margin-left: 15px;
  }
}

.search-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
}

.el-autocomplete {
  width: 40%;
}

.main-menu .el-menu-item {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.main-menu .el-menu-item {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.el-dropdown-link {
  color: #409EFF;
  font-size: 18px;
}

.el-icon-arrow-down {
  color: #409EFF;
  font-size: 16px;
}

.dropdown-item {
  width: 100px;
  text-align: center;
  letter-spacing: 1px;
  color: #A0CFFF;
}

.body {
    display: flex;
    justify-content: space-between;
    width: 1024px;
    height: 100%;
    margin: 0 auto;
}

.el-aside {
  margin-top: 30px;
  border-radius: 4px;
  height: 100%;
}

.avatar-container {
  border: none;
  background: none;
  padding: 0.5em 0;
  padding-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 12px 15px;
  background: #f8f8f8;
  border-radius: 4px 4px 0 0;
}

.username {
    display: block;
    font-size: 1.2em;
    margin-top: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
}

.user-content {
  margin-bottom: 16px;
  word-break: break-all;
  margin-top: 30px;
  height: 100%;
  border-radius: 4px;
  padding-left: 1.5em !important;
}

.el-form-item span {
  font-size: 1em;
}

.select_span {
  margin-right: 15px;
}

.profile_select {
  display: flex;
  justify-content: space-between;
}

</style>